import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { getUserInfoAPI } from '@/api'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 1 用来存储登录成功之后 得到的 token 字段
    token: '', // 保存token 字符串
    userInfo: {} // 定义用户信息对象 id username nickname user_pic
  },
  getters: {
    // username (state) {
    //   return state.userInfo.username
    // }
    // 以下为简写
    // username: (state) => {
    //   return state.userInfo.username
    // }
    // 以下为最简化
    username: (state) => state.userInfo.username, // 用户名
    nickname: (state) => state.userInfo.nickname, // 用户昵称
    // 用户头像
    user_pic: (state) => state.userInfo.user_pic
    // user_pic: (state) => {
    //   if (state.userInfo.user_pic) {
    //     return state.userInfo.user_pic
    //   } else {
    //     return (state.userInfo.user_pic = false)
    //   }
    // }
  },
  mutations: {
    // 2 更新保存token 的 mutation 函数
    updateToken (state, newToken) {
      state.token = newToken
    },
    // 保存用户信息
    updateUserInfo (state, info) {
      state.userInfo = info
    }
  },
  // 使用接口方法+actions获取用户的基本信息 异步的代码
  actions: {
    // 定义初始化用户基本信息的 action 函数 getUserInfoActions
    async initUserInfo (store) {
      const { data: res } = await getUserInfoAPI()
      if (res.code === 0) {
        // 这里是 res.data 需要注意
        store.commit('updateUserInfo', res.data)
      }
    }
  },
  // 配置为 vuex 的插件
  plugins: [createPersistedState()],
  modules: {}
})
// vuex 默认保存在内存中 所以刷新所有的值回归初始化(无法做到持久存储)
// 借助 yarn add vuex-persistedstate@3.2.1这个包可以让vuex做持久化存储
